<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="el-input-form" ref="searchRef">
        <el-form-item label="角色权限名称" prop="name">
          <el-input v-model="formInline.name" placeholder="角色权限名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button type="primary" plain @click="onSearch('reset')" icon="RefreshLeft">重置</el-button>                                                                                                                                              
          <el-button type="primary" plain @click="dialogVisible = true" icon="plus">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span='24' v-loading="loading">
      <tableList  :table-data="tabelData" :table-header="tableHeader" :table-options="tableOptions"></tableList>
    </el-col>
  </el-row>
  <el-dialog v-model="dialogVisible" title="新建角色权限" :width="mobile ? '80%' : '40%'" draggable :before-close="closeDialog">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-row>
        <el-col :lg="15">
          <el-form-item label="角色权限名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave()">保存</el-button>
        <el-button @click="closeDialog">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <distDialog ref="distRef" :mobile="mobile" :dist-visible="distVisible" @dist-close-dialog="distVisible = false">
  </distDialog>
</template>

<script setup>
import tableList from "@/components/tableList/tableList.vue";
import distDialog from "./distDialog.vue";
import { ref, onBeforeMount } from 'vue'
import { reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { roleList, roleDel, roleInsert, roleUpdate } from "@/api/system/role"
import { useDevice } from "@/hooks/web/useDevice";
let { mobile } = useDevice()
const rules = reactive({
  name: [{ trigger: 'blur', message: '请输入角色权限名称', required: true }]
})
let form = reactive({ name: '' })
let distRef = ref(null)
let distVisible = ref(false)
let dialogVisible = ref(false)
const formRef = ref()
const loading = ref(false)
const tableHeader = reactive([
  { label: '角色权限名称', prop: 'name' },
])

const tableOptions = reactive(
  {
    label: '操作',
    width: '240px',
    value: 1,
    options: [
      {
        label: '编辑',
        icon: 'edit',
        method: (row) => {
          handleEdit(row)
        }
      },
      {
        label: '权限分配',
        icon: 'pointer',
        method: (row) => {
          handleDistribution(row)
        }
      },
      {
        label: '删除',
        icon: 'delete',
        method: (row) => {
          handleDel(row)
        }
      },
    ]
  }
)

const handleEdit = (row) => {
  dialogVisible.value = true
  nextTick(() => [
    form = Object.assign(form, row)

  ])

}

const handleDistribution = (row) => {
  distVisible.value = true
  distRef.value.findCurrent(row)
}

const handleSave = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let res = '';
      if (form.id) {
        res = await roleUpdate(form)
      } else {
        res = await roleInsert(form)
      }

      if (res) {
        ElMessage({ message: '操作成功', type: 'success' })
        closeDialog()
        getDataList()
      }
    }
  })
}

const closeDialog = () => {
  formRef.value.resetFields()
  form.id = ''
  dialogVisible.value = false
}

const handleDel = (row) => {
  console.log(row)
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续', '提示', { type: 'warning' }).then(async () => {
    let res = await roleDel({ id: row.id })
    if (res) {
      ElMessage({ message: '操作成功', type: 'success' })
      getDataList()
    }
  }).catch(() => {

  })

}

const tabelData = ref([])
const getDataList = async () => {
  loading.value = true
  let res = await roleList(formInline)
  loading.value = false
  console.log(res)
  if (res) {
    tabelData.value = res.data.list
  }
}

onBeforeMount(() => {
  getDataList()
})

const formInline = reactive({
  name: '',

})

const searchRef = ref('')
const onSearch = (type) => {
  if (type === 'reset') {
    searchRef.value.resetFields()
  } else {
    getDataList()
  }
}

</script>

